<template>
	<view>
		<view class="">
			<!-- <view-navbar></view-navbar> -->
			<view class="">
				<!-- <view class="h88"></view> -->
				<!-- 	bg -->
				<view class="">
					<!-- 1 -->
					<!-- mt22 -->
					<view class="mr40 ml36" >
						<view class="">
							<view class="flex-align">
								<view class="mr16"><image src="/static/img/safe/54504.svg" mode="" style="width: 43rpx;height: 50rpx;"></view>
								<view class=" size_48 color_1F">安全设备</view>
								<!-- size_32 h66 lh66 mr22 -->
								<!-- height: 58rpx; -->
								<view
									class="mr18"
									style="
									width: 204rpx;
									box-shadow: 0rpx 4rpx 4rpx 2rpx rgba(0,0,0,0.16);
									border-radius: 42rpx 42rpx 42rpx 42rpx;
									opacity: 1;
									"
								>
									<view class="mt12  ms10">
										<view class="flex-cen">
											<view class="size_24">设备（奶奶）</view>
											<u-icon name="arrow-down"></u-icon>
										</view>
									</view>
								</view>
								<view class="color_1C  mt20">当前状态正常</view>
								<!-- 								<view class=""><image src="/static/img/safe/145.png" mode="" style="width: 31rpx;height: 31rpx;"></image></view> -->
							</view>
						</view>
					</view>
					
					<!--  -->
					<view class="ml48 mt32">
						<view class="flex-align">
							<view class="mr10 color_1b size_26">
							设备状态
							</view>
							<view class="mr4" style="width: 16rpx;
							border-radius: 50%;
											height: 16rpx;
											background: #03BD00;
											opacity: 1;">
								
							</view>
							<view class="color_1D  size_26 mr8">
								在线
							</view>
											<image src="/static/img/safe/54394.svg" mode="" style="width: 17rpx;height: 30rpx;margin-right: 16rpx;" ></image>
											<image src="/static/img/safe/54172.svg" mode="" style="width: 64rpx;height: 15rpx;" ></image>
							<view class="">
				
							</view>
							<view class="">
								
							</view>
						</view>
					</view>
					
					<!--  -->
					<view class="" >
						<!-- 2 -->
						<view class="ml28 mr32 pt20">
							<view class="">
								<view class="row1">
									<!--  -->
									<view class=" ml26">
										<view class="">
											<!-- 1 -->
											<view class="flex-align">
												<view class="ml18 mr30 mt18">
													<view class="">
														<view class=""><image src="/static/img/safe/240.png" mode="" style="width: 71rpx;height: 81rpx;"></image></view>
													</view>
												</view>
												<view class="mr190">
													<view class="">
														<text class="color_1F size_65">体温</text>
														<text decode class="color_1C size_65">{{T}}</text>
														</view>
												</view>
												<view class="">
													<view class="">
														<view class="" style="transform:rotate(90deg);"><u-icon name="more-dot-fill"></u-icon></view>
													</view>
												</view>
											</view>
											<!-- 2 -->
											<view class="mt48">
												<view class="flex-wrap">
													<view class="ms24 mr24" v-for="item in 4" :key="item">
														<view class="">
															<view class="row4">
																<!--  -->
																<view class="pt20">
																	<view class="flex-cen flex-between ">
																		<view class="mr12">
																			<image src="/static/img/safe/247.png" mode="" style="width: 48rpx;height: 40rpx;"></image>
																		</view>
																		<view class="flex-column">
																			<view class="size_20 color_1D">血压</view>
																			<!-- style="width: 164rpx;" -->
																			<view class="size_14 color_79 mt6" >
																			收缩压：90-139mmHg 
																			</view>
																			<view class="size_14 color_79 mt6" >
																			舒张压：60-89mmHg</view>
																			</view>
																		<view class="color_1C size_14 ms40">正常</view>
																	</view>
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
											<!-- 3 -->
											<view class="">
												<view class="">
													<view class="row5  flex-align ">
														<view class=" ">
															<view class="flex">
																<view class="ml24 mr40">
																	<view class="color_87 size_24">起床</view>
																	<view class="size_20 color_1F">06:30 AM</view>
																</view>
																<view class="mr90">
																	<image src="/static/img/safe/Progress.png" mode="" style="width: 275rpx;height: 61rpx;"></image>
																</view>
																<view class=" flex-column"  style="align-items: flex-end;">
																	<view class="color_87 size_24">睡眠</view>
																	<view class="size_20 color_1F">—— PM</view>
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 3 -->
						<view class="ml50  mt12">
							<view class="">
								<view class="flex flex-align">
									<view class="mr10 size_40  color_000">位置</view>
									<view class="color_33">当前位置距家2m</view>
								</view>
							</view>
						</view>	
						<!-- 4 -->
						<view class="ml56 mr54 mt12">
							<view class="">
<!-- 								<map 
								style="width: 640rpx;height: 298rpx;"
								:latitude="22.55" :longitude="113.96"  :markers="marker">
								</map> -->
								<image src="/static/img/safe/map.png" mode="" style="width: 640rpx;height: 298rpx;">
																	</image>
							</view>
						</view>
						<!-- 5 -->
						<view class="ml56 mr54 mt28 ms24">
							<view class="flex flex-align flex-around">
								<view class="flex-cen" >
									<view class="flex-column flex-cen ">
										<image src="/static/img/safe/54141.svg" mode="" style="width: 40rpx;height: 43rpx;" ></image>
										<view class="size_22 color_20E mt4">
											查看轨迹
										</view>
									</view>
								</view>
								<view class="flex-cen" >
									<view class="" style="width: 2rpx;
															height: 38rpx;
															border-radius: 0rpx 0rpx 0rpx 0rpx;
															opacity: 1;
															border: 1rpx solid #DDDDDD;">
									</view>
									<view class="flex-column flex-cen mr100 ml100">
										<image src="/static/img/safe/54149.svg" mode="" style="width: 47rpx;height: 43rpx;" ></image>
										<view class="size_22 color_20E mt4">
											导航
										</view>
									</view>
									<view class="" style="width: 2rpx;
															height: 38rpx;
															border-radius: 0rpx 0rpx 0rpx 0rpx;
															opacity: 1;
															border: 1rpx solid #DDDDDD;">
									</view>
								</view>
								<view class="flex-cen" >
									<view class="flex-column flex-cen ">
										<image src="/static/img/safe/52805.svg" mode="" style="width: 32rpx;height: 44rpx;" ></image>
										<view class="size_22 color_20E mt4">
											语音
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 6 -->
						<view class=" ml56 mr56 mt56">
							<view class="">
								<view class="">
									<view class="">	
										<view class="row3 flex-cen"><view class="word">SOS</view></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx	;"></view>
			<!-- 底部 -->
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/* 空格 */
			T:'&ensp;35°C',
			/* map */
			/* 地图 */
			latitude: 22.55, //纬度
			longitude: 113.96, //经度
			scale: 13, //缩放级别
			bottomData: false,
			marker:[
				{
					id: 2,
					latitude: 22.55, //纬度
					longitude: 113.96, //经度
					iconPath: '/static/img/safe/54173.svg', //显示的图标
					rotate: 0, // 旋转度数
					width: 55, //宽
					height: 85, //高
					alpha: 1, //透明度
					// callout: {
					// 	//自定义标记点上方的气泡窗口 点击有效
					// 	content: '德隆大厦', //文本
					// 	color: '#ffffff', //文字颜色
					// 	fontSize: 14, //文本大小
					// 	borderRadius: 15, //边框圆角
					// 	borderWidth: '10',
					// 	bgColor: '#7976E9', //背景颜色
					// 	display: 'ALWAYS' //常显
					// }
				},
			]
		};
	}
};
</script>

<style lang="scss" >
page {
	// background-color: #fff;
}

.row1 {
	width: 690rpx;
	height: 592rpx;
	// background: #f1f1fe;
	border-radius: 28rpx 28rpx 28rpx 28rpx;
	opacity: 1;
}

.row2 {
	width: 304rpx;
	height: 80rpx;
	background: #7976e9;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
}

.row3 {
	width: 628rpx;
	height: 80rpx;
	background: #ff0000;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	border: 10rpx solid #ffcece;
	opacity: 1;
}
.row4 {
	width: 306rpx;
	height: 118rpx;
	background: #f7fdf6;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
}
.row5 {
	width: 640rpx;
	height: 118rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 96rpx 2rpx rgba(0, 0, 0, 0.12);
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
}

.word {
	// width: 152rpx;
	// height: 52rpx;
	font-size: 38rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	// line-height: 0rpx;
	-webkit-background-clip: text;
	// -webkit-text-fill-color: transparent;
}

 .rLine::after{
	content:"";
	// display: block;
	display: inline-block;
	width: 2rpx;
	height: 38rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	border: 1rpx solid #DDDDDD;
}
</style>
